<template>
  <div class="wrap">
    <div class="bar1" ref="crosswise"></div>
  </div>
</template>
<script>
import mixinData from "../utils/mixin.js"

export default {
    //mixin混入
  mixins:[mixinData],
  methods: {
    async getData() {
      //获取业务数据
      let res = await this.$http.get("CropGrowthTrend");
      this.data = res.data;
      // console.log(this.data);
      this.getEcharts();
    },
    getEcharts() {
      //创建echarts实例
      this.echarts = this.$echarts.init(this.$refs.crosswise, this.themeName);
      //组装类目轴
      let category = this.data[0].content.map((item) => item.month);
      // 组装数值轴
      let value = this.data.map((item) => {
        //每条线的数据
        let data = item.content.map((item2) => {
          return item2.area;
        });
        //每条线
        return {
          name: item.city,
          type: "line",
          data: data,
          stack: {}, //堆叠配置
          smooth: true, //设置圆滑曲线
          // areaStyle: {}  //面积渲染
        };
      });
      // console.log(category,value);
      //设置配置项
      let option = {
        title: {
          text: "▍各地区种植面积统计top10",
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        xAxis: {
          type: "category",
          data: category,
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        // 提示语
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            z: 0,
            lineStyle: {
              type: "solid",
            },
          },
        },
        series: value
      };
      this.echarts.setOption(option);
      this.resize();
    },
    resize() {
      // 获取一个比例尺
      let width = this.$refs.crosswise.offsetWidth;
      // 3.5-3.7
      let scale = (width / 100) * 3.6;
      // 根据比例尺动态设置标题
      let updateOption = {
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
      };
      this.echarts.setOption(updateOption);
      this.echarts.resize();
    },
  },
  mounted() {
    this.getData();
    //一进来就监听窗口变化
    window.addEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped>
</style>